<template>
  <div class="goods">
      <div class="swiper">
          <swiper class="swiper-container"
           indicator-dots="true"
           autoplay="true"
           interval="3000"
           duration="1000">
            <block v-for="(item,index) in gallery" :key="index">
                <swiper-item class="swiper-item">
                    <img class="slide-image" :src="item.img_url" />
                </swiper-item>
            </block>
          </swiper>
          <!-- 小程序分享 -->
          <button class="share" hover-class="none" open-type="share" value="">分享商品</button>
      </div>

      <div class="swiper-b">
          <div class="swiper-b-item">30天无忧退货</div>
          <div class="swiper-b-item">48小时快速退款</div>
          <div class="swiper-b-item">满88元免邮费</div>
      </div>

      <div class="goods-info">
          <div class="c">
              <p>{{info.name}}</p>
              <p>{{info.goods_brief}}</p>
              <p>￥{{info.retail_price}}</p>
              <!-- 品牌制造商 -->
              <div class="brand" v-if="brand.name">
                  <p>{{brand.name}}</p>
              </div>
          </div>
      </div>

      <div class="section-nav" @click="showType">
          <div>请选择规格数量</div>
          <div></div>
      </div>

      <!-- 商品参数 -->
      <div class="attribute">
          <div class="attribute-head">
              商品参数
          </div>
          <div class="attribute-item" v-for="(item,index) in attribute" :key="index">
              <div>{{item.name}}</div>
              <div>{{item.value}}</div>
          </div>
      </div>

      <!-- 图片展示 -->
      <div class="detail" v-if="goods_desc">
          <!-- Mpvue的微信小程序富文本解析组件 -->
          <wxParse :content="goods_desc" />
      </div>

      <!-- 常见问题 -->
      <div class="common">
          <div class="common-head">
              <text class="commo-title">常见问题</text>
          </div>
          <div class="problem">
              <div class="problem-item"
               v-for="(item, index) in issueList" :key="index">
                  <div class="question-box">
                      <text class="spot">·</text>
                      <text class="question">{{item.question}}</text>
                  </div>
                  <div class="answer">{{item.answer}}</div>
              </div>
          </div>
      </div>

      <!-- 大家都在看 -->
      <div class="common">
          <div class="common-head">
              <text class="common-title">大家都在看</text>
          </div>
          <div class="sublist">
              <div class="sublist-item"
               v-for="(item, index) in productList" :key="index">
                  <img :src="item.list_pic_url" />
                  <p>{{item.name}}</p>
                  <p>￥{{item.retail_price}}</p>
              </div>
          </div>
      </div>

      <!-- 底部栏 -->
      <div class="bottom-fixed">
          <div class="collect-box" @click="collect">
              <div class="collect" :class="[collectFlag ? 'active' : '']"></div>
          </div>
          <div class="car-box">
              <div class="car" @click="toCart">
                  <span>{{allnumber}}</span>
                  <img src="/static/images/ic_menu_shoping_nor.png" />
              </div>
          </div>
          <div @click="buy">立即购买</div>
          <div @click="addCart">加入购物车</div>
      </div>
      <!-- 选择规则的弹出层 -->
      <div class="pop" v-show="showPop" @click="showType"></div> <!--点击遮罩层也能让弹出层消失-->
      <div class="attr-pop" :class="[showPop ? 'fadeup' : '']">
          <div class="pop-top">
              <div class="pop-left">
                  <img :src="info.primary_pic_url" />
              </div>
              <div class="pop-right">
                  <p>价格￥{{info.retail_price}}</p>
                  <p>请选择数量</p>
              </div>
              <div class="pop-close" @click="showType">x</div>
          </div>
          <div class="pop-bottom">
              <p>数量</p>
              <div class="pop-count">
                  <div class="pop-cut" @click="reduce">-</div>
                  <input type="text" class="number" v-model="number" disabled="false">
                  <div class="pop-add" @click="add">+</div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import { get,post } from '../../utils'
import wxParse from 'mpvue-wxParse'
export default {
    data() {
        return {
            gallery: [],
            id: 0,
            openId: '',
            info: {},
            brand: {},
            showPop: false,
            number: 0,
            attribute: [],
            goods_desc: '',
            issueList: [],
            productList: [],
            collectFlag: false,
            goodsId: '',
            allnumber: 0,
            allPrice: ''
        }
    },
    // 引用组件
    components: {
        wxParse
    },
    // 小程序中的方法 自定义用户转发时的内容
    onShareAppMessage() {
        // console.log(this.info.name)
        return {
            title: this.info.name,
            path: '/pages/goods/main?id' + this.info.id,
            // 限定图片 如果不指定将自动截取当前图片作为用户转发时的图片
            imageUrl: this.gallery[0].img_url
        }
    },
    mounted() {
        this.openId = wx.getStorageSync('openId') || ''
        // 在原生小程序中: this.id = this.$root.query.id
        // 在mpvue中: 
        this.id = this.$root.$mp.query.id
        // console.log(this.id)
        this.goodsDetail()
    },
    methods: {
        async goodsDetail() {
            const data = await get('/goods/detailaction', {
                id: this.id,
                openId: this.openId
            })
            // console.log(data)
            this.info = data.info
            this.gallery = data.gallery
            this.attribute = data.attribute
            this.goods_desc = data.info.goods_desc
            this.issueList = data.issue
            this.productList = data.productList
            this.goodsId = data.info.id
            // 根据数据库里的值（是否有收藏过）加载商品详情页
            this.collectFlag = data.collected
            this.allnumber = data.allnumber
            this.allPrice = data.info.retail_price
        },
        showType() {
            this.showPop = !this.showPop
        },
        add() {
            this.number += 1
        },
        reduce() {
            // 不少于1件
            if(this.number > 1) {
                this.number -= 1
            } else {
                return false
            }
        },
        async collect() {
            this.collectFlag = !this.collectFlag
            const data = await post('/collect/addcollect', {
                openId: this.openId,
                goodsId: this.goodsId
            })
            // console.log(data)
        },
        toCart() {
            // 跳转至tabbar的购物车页面
            wx.switchTab({
                url: '/pages/cart/main',
            })
        },
        async buy() {
            // 先判断弹出层是否为true
            if (this.showPop) {
                if (this.number === 0) {
                    // 弹出消息提示
                    wx.showToast({
                        title: '请选择商品数量',
                        duration: 2000,
                        icon: 'none',
                        mask: true,
                        success: res => {}
                    })
                    return false
                }
                const data = await post('/order/submitAction', {
                    goodsId: this.goodsId,
                    openId: this.openId,
                    allPrice: this.allPrice
                })
                // console.log(data)
                if(data) {
                    wx.navigateTo({
                        url: '/pages/order/main'
                    });
                }
            } else {
                this.showpop = true
            }
        },
        async addCart() {
            if (this.showPop) {
                if (this.number === 0) {
                    wx.showToast({
                        title: '请选择商品数量',
                        duration: 2000,
                        icon: 'none',
                        mask: true,
                        success: res => {}
                    })
                    return false
                }
                const data = await post('/cart/addCart', {
                    openId: this.openId,
                    goodsId: this.goodsId,
                    number: this.number
                })
                // console.log(data)
                if(data) {
                    this.allnumber = this.allnumber + this.number
                    wx.showToast({
                        title: '添加成功',
                        icon: 'success',
                        duration: 1500
                    })
                }
            } else {
                this.showPop = true
            }
        }
    }
}
</script>

<style scoped>
@import './style.css';
/* 组件样式 */
@import url('~mpvue-wxparse/src/wxParse.css');
</style>